<template>
	<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
		<el-form ref="queryForm" slot="header" :inline="true" :model="queryParams" label-width="75px">
			<el-form-item label="商家ID:" prop="uuid">
				<el-input v-model="queryParams.uuid" clearable maxlength="6" show-word-limit placeholder="请输入商家ID" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="手机号码:" prop="mobile">
				<el-input v-model="queryParams.mobile" clearable maxlength="11" show-word-limit placeholder="请输入手机号码" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="商家名称:" prop="uuid">
				<el-input v-model="queryParams.uuid" clearable maxlength="6" show-word-limit placeholder="请输入商家名称" @keyup.enter.native="handleQuery" />
			</el-form-item>
			<start-end-time ref="child" :get-time="getTime" title="创建时间:"></start-end-time>
			<el-form-item label="提现方式:" prop="isOnSale">
				<el-select v-model="queryParams.isOnSale" placeholder="全部">
					<el-option :value="null" label="全部"></el-option>
					<el-option :value="1" label="微信"></el-option>
					<el-option :value="0" label="支付宝"></el-option>
					<el-option :value="0" label="银行卡"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="审核状态:" prop="isStatus">
				<el-select v-model="queryParams.isOnSale" placeholder="全部">
					<el-option :value="null" label="全部"></el-option>
					<el-option :value="1" label="待审核"></el-option>
					<el-option :value="0" label="审核通过"></el-option>
					<el-option :value="0" label="审核失败"></el-option>
				</el-select>
			</el-form-item>
			<start-end-time ref="child" :get-time="getAuditTime" title="审核时间:"></start-end-time>
		</el-form>
		<template slot="options">
			<l-search @search="handleQuery" @refresh="resetQuery" />
			<el-button type="primary" @click="settingAudit">
				<!-- <svg-icon icon-class="tx" size="16px"></svg-icon> -->
				提现设置</el-button
			>
			<!-- <el-button v-hasPermi="['mall:order:export']" type="primary" @click="handleExport">
				<svg-icon icon-class="export" size="16px"></svg-icon>
				导出
			</el-button> -->
		</template>
		<!-- <el-tabs v-model="tabActive" class="tabs">
			<el-tab-pane v-for="(item, index) in tabData" :key="index" :label="item.label + `（${tabStatistics[item.key]}）`" :name="item.key"></el-tab-pane>
		</el-tabs> -->
		<el-table v-loading="loading" :data="partnerList" stripe>
			<el-table-column :formatter="emptyToString" align="center" label="序号" type="index" width="55" />
			<el-table-column :formatter="emptyToString" align="center" label="商家ID" prop="uuid" min-width="120" />
			<el-table-column :formatter="emptyToString" align="center" label="手机号码" min-width="120" prop="mobile"> </el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="商家名称" min-width="120" prop="userLevel"> </el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="提现类型" prop="withdrawType" min-width="120">
				<template slot-scope="scope">
					<div v-if="scope.row.withdrawType === 1">微信</div>
					<div v-if="scope.row.withdrawType === 2">支付宝</div>
					<div v-if="scope.row.withdrawType === 3">银行卡</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToNumber" align="center" label="提现金额" prop="value" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToNumber" align="center" label="手续费" prop="value" min-width="120"></el-table-column>
			<el-table-column :formatter="emptyToNumber" align="center" label="到手金额" prop="value" min-width="120"></el-table-column>

			<el-table-column :formatter="emptyToString" align="center" label="审核状态" min-width="120">
				<template slot-scope="scope">
					<div v-if="scope.row.result === 0">未审核</div>
					<div v-if="scope.row.result === 1">审核通过</div>
					<div v-if="scope.row.result === 2">审核失败</div>
				</template>
			</el-table-column>
			<el-table-column :formatter="emptyToString" align="center" label="申请时间" min-width="200" prop="createTime">
				<template slot-scope="scope">
					<div class="w-full flex flex-col items-center">
						<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
						<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column :width="tableAction" align="center" header-align="center" label="操作">
				<template slot-scope="scope">
					<div class="table-action flex justify-center">
						<el-button v-if="scope.row.result !== 2" :type="scope.row.result === 1 ? 'primary' : 'primary'" @click="openAudit(scope.row)">
							{{ scope.row.result === 1 ? '详情' : '审核' }}
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<l-dialog v-model="openDetails" close-button-text="拒绝" ok-button-text="通过" title="提现审核" width="568px" @close="handleClose" @formClose="auditWithdraw(2)" @formSubmit="auditWithdraw(1)">
			<div class="content">
				<div class="content-info">
					<div class="info info-plus">
						<div>
							<span class="label">商家ID：</span><span class="text">{{ info.uuid }}</span>
						</div>
					</div>
					<div class="info info-plus">
						<div>
							<span class="label">手机号码：</span><span class="text">{{ info.mobile }}</span>
						</div>
					</div>
					<div class="info info-plus">
						<div>
							<span class="label">商家姓名：</span><span class="text">{{ info.name }}</span>
						</div>
					</div>
					<div v-if="info.withdrawType === 1 || info.withdrawType === 2" class="info info-plus">
						<div>
							<span class="label">提现方式：</span>
							<span v-if="info.withdrawType === 1" class="text">微信</span>
							<span v-if="info.withdrawType === 2" class="text">支付宝</span>
							<span v-if="info.withdrawType === 3" class="text">银行卡</span>
						</div>
					</div>
					<div v-if="info.withdrawType === 1 || info.withdrawType === 2" class="info info-plus">
						<div v-if="info.withdrawType === 2">
							<span class="label">支付宝账号：</span><span class="text">{{ info.phone }}</span>
						</div>
						<div v-if="info.withdrawType === 1">
							<span class="label">微信号：</span><span class="text">{{ info.phone }}</span>
						</div>
					</div>
					<div v-if="info.withdrawType === 1 || info.withdrawType === 2" class="info info-plus">
						<div>
							<span class="label">提现金额：</span><span class="text" style="color: #f22c40">{{ info.value }}</span>
						</div>
					</div>
					<div v-if="info.withdrawType === 3" class="info">
						<div><span class="label">提现类型：</span><span class="text">银行卡</span></div>
						<div>
							<span class="label">开户银行：</span><span class="text">{{ info.bankName }}</span>
						</div>
					</div>
					<div v-if="info.withdrawType === 3" class="info info-plus">
						<div>
							<span class="label">银行卡号：</span><span class="text">{{ info.phone }}</span>
						</div>
					</div>
					<div v-if="info.withdrawType === 3" class="info">
						<div>
							<span class="label">持卡人姓名：</span><span class="text">{{ info.name }}</span>
						</div>
						<div>
							<span class="label">提现金额：</span><span class="text text-[#f22c40]">{{ info.value }}</span>
						</div>
					</div>
					<div class="info info-img">
						<div>
							<span class="label">收款二维码：</span>
							<span class="text img">
								<el-image :preview-src-list="[info.qr]" :src="info.qr" :z-index="9999" style="width: 120px; height: 120px"> </el-image>
							</span>
						</div>
					</div>
					<div class="info info-plus">
						<div>
							<span class="label">提现金额：</span><span class="text">{{ info.name }}</span>
						</div>
					</div>
					<div class="info info-plus">
						<div>
							<span class="label">手续费(%)：</span><span class="text">{{ info.name }}</span>
						</div>
					</div>
					<div class="info info-plus">
						<div>
							<span class="label">到手金额：</span><span class="text">{{ info.name }}</span>
						</div>
					</div>
				</div>
			</div>
		</l-dialog>
	</l-page>
</template>

<script>
import { audit, exportAudit, getAuditList, getStatistics } from '@/api/mall/withdraw';
import startEndTime from '@/components/StartEndTime';
import countTo from 'vue-count-to';
import tableMixins from '@/mixins/table';

export default {
	name: 'WithdrawAudit',
	components: { startEndTime, countTo },
	mixins: [tableMixins],
	data() {
		return {
			tabActive: 'totalCount',
			tabData: [
				{
					label: '全部',
					name: null,
					key: 'totalCount',
				},
				{
					label: '待审核',
					name: 0,
					key: 'waitCount',
				},
				{
					label: '审核失败',
					name: 2,
					key: 'refuseCount',
				},
				{
					label: '已完成',
					name: 1,
					key: 'auditCount',
				},
			],
			tabStatistics: {
				auditAmount: 0,
				auditCount: 0,
				refuseAmount: 0,
				refuseCount: 0,
				totalCount: 0,
				waitAmount: 0,
				waitCount: 0,
			},
			// 遮罩层
			loading: false,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 合伙人类型字典
			partnerType: [],
			// 合伙人表格数据
			partnerList: [],
			//用户选项
			userOptions: [],
			area: [],
			municipalAddress: [],
			district: [],
			details: {},
			// 弹出层标题
			title: '',
			info: {},
			openDetails: false,
			// 是否显示弹出层
			open: false,
			audit: false,
			// 搜索参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				id: null,
				username: null,
				mobile: null,
				type: null,
				approvalStatus: null,
				status: null,
				result: null,
				withdrawType: null,
				userLevel: null,
				date: [],
				auditDate: [],
				beginTime: null,
				endTime: null,
				beginAuditTime: null,
				endAuditTime: null,
			},
			// 表单参数
			form: {},
			id: '',
		};
	},
	watch: {
		tabActive() {
			const item = this.tabData.find((item) => item.key === this.tabActive);
			this.queryParams.result = item.name;
			this.handleQuery();
		},
	},
	created() {
		this.getList();
		this.getStatistics();
		this.getStatisticsV2();
	},
	methods: {
		getStatistics() {
			getStatistics().then((response) => {
				this.details = response.data;
			});
		},
		getStatisticsV2() {
			this.$request.get('/mall/audit/statisticsV2').then((res) => {
				this.tabStatistics = res.data;
			});
		},
		settingAudit() {
			this.$router.push('withdrawSetting');
		},
		handleClose() {
			this.openDetails = false;
		},
		openAudit(row) {
			this.id = row.id;
			this.info = row;
			this.openDetails = true;
		},
		auditWithdraw(value) {
			audit({
				id: this.id,
				result: value,
			}).then(() => {
				this.getList();
				this.$message.success('操作成功!');
				this.handleClose();
			});
		},
		getList() {
			this.loading = true;
			getAuditList(this.queryParams)
				.then((response) => {
					this.partnerList = response.data.records;
					this.total = response.data.total;
					this.setActionWidth();
				})
				.finally(() => {
					this.loading = false;
				});
		},

		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		//获取创建时间
		getTime(startTime, endTime) {
			this.queryParams.startTime = startTime;
			this.queryParams.endTime = endTime;
		},
		//审核时间
		getAuditTime(startTime, endTime) {
			this.queryParams.beginAuditTime = startTime;
			this.queryParams.endAuditTime = endTime;
		},
		// 表单重置

		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			//清空审核时间和创建时间
			this.$refs.child.resetTime();
			this.resetForm('queryForm');
			this.handleQuery();
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有提现数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportAudit(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
<style lang="scss" scoped>
.tabs {
	::v-deep {
		.el-tabs__nav-wrap::after,
		.el-tabs__active-bar {
			height: 1px;
		}
		.el-tabs__item {
			font-weight: bold;
			font-size: 12px;
		}
	}
}
.content {
	.content-info {
		.title {
			font-size: 16px;
			font-weight: 900;
			margin-bottom: 20px;
			padding-left: 30px;
		}

		.image__preview {
			display: flex;
			justify-content: center;

			.image {
				width: 329px;
				height: 162px;
				margin: 0 10px;
				display: block;
				border-radius: 8px;
			}
		}

		.btn-box {
			display: flex;
			justify-content: center;

			.btn {
				padding: 0;
				font-size: 18px;
				width: 236px;
				height: 60px;
				opacity: 1;
				border-radius: 4px;
				line-height: 60px;
			}
		}

		.info {
			display: flex;
			margin-bottom: 25px;

			> div {
				width: 50%;
				height: 40px;
				line-height: 40px;
				display: flex;
				color: #333333;
				justify-content: center;

				.label {
					width: 85px;
					font-size: 12px;
				}

				.text {
					width: 154px;
					background: #f7f7f7;
					font-size: 14px;
					box-sizing: border-box;
					padding-left: 12px;
					border: 1px solid #e5e5e5;
					opacity: 1;
					border-radius: 4px;
				}

				.img {
					background: #ffffff;
					border: none;
				}
			}
		}

		.info-img {
			height: 140px;

			.text {
				height: 140px;
				padding-left: 0px !important;
			}
		}

		.info-plus {
			> div {
				width: 100%;

				.text {
					width: 416px;
					//color: #F14A46;
				}
			}
		}
	}
}
</style>
